<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head>
<%@ include file="../../include/easyui.jsp" %>
<script type="text/javascript" src="${path}/plug-in/echart/echarts.min.js"></script>
<html>
  <head>
	<title>支出统计报表</title>
  </head>
<body>
 <div id="main" style="width: 100%;height:500px;"></div>
</body>
<script type="text/javascript">
	// 指定图表的配置项和数据
	var myChart = echarts.init(document.getElementById('main'));
	// 指定图表的配置项和数据
	option = {
	    title : {
	        text: '个人支出统计报表（单位:万元）',
	        x:'center'
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            dataView : {show: true, readOnly: false},
	           // magicType : {show: true, type: ['line', 'bar']},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient: 'vertical',
	        x: 'left',
	        left:15,
	        data: []
	    },
	    series : []
	};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
	
	$(function (){
		$.getJSON("/console/statistics/rewrite/echart", {type:'person'}, function(result){
			if(result.flag){
				myChart.setOption({
					legend:{
						data: result.data.legendData
					},
					series:[
					        {
					            name: '姓名',
					            type: 'pie',
					            radius : '55%',
					            center: ['40%', '50%'],
					            data: result.data.seriesData,
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					]
				});
			}
		});
	});
	
</script>
</html>